window.onload = function() {
    var oBoxs = $('.box'), // 这些变量必须设置为全局的
        oMain = $('#main')[0]; // 装载所有图片的div

    window.onscroll = function() {
        clearTimeout(handleScroll.tID);
        handleScroll.tID = setTimeout(function() {
            handleScroll();
        }, 200)
    }

    function handleScroll() {
        var lastBox = oBoxs[oBoxs.length - 1];
        var lastBoxTop = lastBox.offsetTop; // 距离页面顶部的高度
        var lastBoxHeight = lastBox.offsetHeight; // 自身高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //注意解决兼容性
        var bodyHeight = document.documentElement.clientHeight; //可视区高度

        // 加载图片的条件
        if ((scrollTop + bodyHeight) > lastBoxTop) {
            console.log('加载图片')
            loadImg(oMain);
        }
    }
}

// 选择器函数
function $(selector) {
    return document.querySelectorAll(selector);
}

// 将图片包装成box后，加载到mainDiv中
function loadImg(mainDiv) {
    var imgData = { data: [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' },{ 'src': '4.jpg' }, { 'src': '5.jpg' }, { 'src': '6.jpg' }] };
    var prefix = '../source/image/';

    imgData.data.forEach(function(val, index) {
        var oPic = document.createElement('div');
        oPic.className = 'pic';
        var oBox = document.createElement('div');
        oBox.className = 'box';
        var img = document.createElement('img');
        img.src = prefix + val.src;

        oPic.appendChild(img);
        oBox.appendChild(oPic);
        mainDiv.appendChild(oBox);
    });
}